<template>
    <div class="messagelist">
        <div class="content">
            <!-- 账号信息 -->
            <div class="userInfo">
                <!-- 真实姓名 -->
                <div class="card-box">
                    <p>真实姓名</p>
                    <input  type="text" v-model="realName" placeholder="请输入您的真实姓名">
                </div>
                <!-- 密码 -->
                <div class="card-box">
                    <p>手机号码</p>
                    <input type="number" @blur="checkMobile" v-model="mobile" placeholder="请输入您的手机号码">
                </div>
                <!-- 省市区 -->
                <div class="card-box">
                    <p>省/市/区</p>
                    <van-field
                        class="category-box"
                        readonly
                        clickable
                        :value="value2"
                        placeholder="请选择您所在的区域"
                        @click="showAddress = true"
                    />
                    <!-- 省市区 -->
                    <van-popup v-model="showAddress" position="bottom">
                        <van-area :area-list="areaList" value="110101"  @confirm="conformAddrss" @cancel="hideCity"/>
                    </van-popup>
                </div>
                <!-- 详细地址 -->
                <div class="card-box">
                    <p>详细地址</p>
                    <input type="text" v-model="address" placeholder="请输入您的详细地址">
                </div>
                <!-- 工厂名称 -->
                <div class="card-box">
                    <p>工厂名称</p>
                    <input type="text"  v-model="factory" placeholder="请输入您的工厂名称">
                </div>
                 <!-- 工厂分类 -->
                <div class="card-box">
                    <p>工厂分类</p>
                    <van-field
                        class="category-box"
                        readonly
                        clickable
                        :value="value"
                        placeholder="请选择工厂分类"
                        @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker   
                            show-toolbar
                            :columns="columns"     
                            @cancel="showPicker = false"
                            @confirm="onConfirm"
                        />
                    </van-popup>
                </div>
                 <!-- 人数 -->
                <div class="card-box">
                    <p>工厂人数</p>
                    <input type="number" @blur="checkNum" min="1" v-model="staffNumber" placeholder="请输入您的工厂人数">
                </div>
            </div>
            <!-- 保存按钮 -->
            <div class="btn" @click="addUser">确认</div>
        </div>
        <!-- loading -->
        <div class="loading-box" v-show="isShowLoading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>

<script>
import areaList from '../assets/js/area'
import { Toast ,Dialog,Field ,Loading ,Picker,Popup ,Area,AddressEdit,} from 'vant';
import {postInputBaseInfo,postQueryUserInfo} from '@/api/user'
export default {
    name:'typeIn',
    //声明组件
    components: {
        [Field .name]: Field ,
        [Toast.name]: Toast,
        [Loading.name]:Loading,
        [Dialog.name]:Dialog,
        [Picker.name]:Picker,
        [Popup.name]:Popup,
        [Area.name]:Area,
        [AddressEdit.name]:AddressEdit,
    },
    data(){
        return {
            isShowLoading:true,//是否显示；loading
            token:'',//token
            value: '',
            value2: '',//省市区取值
            realName:'',//用户名称
            mobile:'',//用户密码
            province:'',//城市
            city:'',//城市
            district:'',//区
            address:'',//详细地址
            factory:'',//工厂名称
            category:'',//工厂的分类
            isEdit:false,//是否是编辑 默认false 有子账号id 为编辑
            columns: ['西服', '衬衫', '牛仔裤', '休闲裤', '内衣','针织外套','梭织休闲上衣','T恤','工作服','女装','运动服','童装','汽车内饰',
                      '安全气囊'  ,'家具','鞋类','皮包','其它',
            ],//工厂分类数据
            showPicker:false,//是否显示工厂分类弹出层
            showAddress:false,//省市区选择弹窗
            areaList:'',//地址
            staffNumber:'',//企业工厂人数
            isBind:false, // false 默认没有绑定设备号  true 已绑定设备号信息
        }
    },
    created(){
        //获得参数token
        if(this.$route.query.token){
            this.token = this.$route.query.token;
        }   
        //获得参数子账号id 
        if(this.$route.query.id && this.$route.query.id >0){
            this.id = this.$route.query.id;
            this.isEdit = true;//编辑
         
        }else{
            this.isShowLoading = false;//隐藏loading
        }  
        this.areaList = areaList;
        // console.log(areaList)  
        // 查询个人信息  是否已经绑定了设备号
        this.selectUserInfo();

    },
    methods:{
        // 工厂分类change事件
        onConfirm(value) {
            console.log(value)
            this.category = value;
            this.value = value;
            this.showPicker = false;
        },
        // 省市区确认
        conformAddrss(e){
            console.log("确认",e);
            let arg = e; //城市数据数组格式
            this.province = e[0].name;
            this.city = e[1].name;
            this.district = e[2].name;

            this.value2 = this.province + '/' + this.city + '/' + this.district;
            this.showAddress = false;
        },
        // 隐藏省市区弹窗
        hideCity(){
            this.showAddress = false;
        },
        // 手机号格式验证
        checkMobile(){
            if(!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.mobile))){
                Toast("手机号码格式不正确！");
                this.mobile = '';
            } 
        },
        // 工厂人数大于0的正整数
        checkNum(){
            var reg = '/^[0-9]*[1-9][0-9]*$/';
            if(!(/^[0-9]*[1-9][0-9]*$/.test(this.staffNumber))){
                Toast("请输入正确的工厂人数！");
                this.staffNumber = '';
            } 
        },
        //确认提交
        addUser(){
            let that = this;
            if(!that.realName){
                Toast("请输入您的真实姓名");
            }else if(!that.mobile){
                Toast("请输入您的手机号码");
            }else if(!that.province || !that.city || !that.district){
                Toast("请选择您所在的区域");
            }else if(!that.address){
                Toast("请输入您的详细地址");
            }else if(!that.factory){
                Toast("请输入您的工厂名称");
            }
            else if(!that.category){
                Toast("请选择您的工厂所属分类");
            }else if(!that.staffNumber){
                Toast("请填写您的工厂人数");
            }
            else{
                let para = {};
                para.token = that.token;
                para.realName = that.realName;
                para.mobile = that.mobile;
                para.province = that.province;
                para.city = that.city;
                para.district = that.district;
                para.address = that.address;
                para.category = that.category;
                para.staffNumber = that.staffNumber;
                para.factory = that.factory;
                // console.log(para)
                postInputBaseInfo(para).then(res => {
                    if(res.code == 200){
                        // console.log(res,"数据");
                        // 成功并返回首页
                        Toast("提交成功");
                        setTimeout(function(){
                            //bind  表示跳转绑定设备号页面
                            let para = {};
                            if(this.isBind){
                                //已绑定设备号
                                para.linkType = "main";//这里main 是特别约定 此页面 返回原生首页用的 
                            }else{
                                //未绑定设备号
                                para.linkType = "bind";//这里bind 是表示跳转设备号绑定页面
                            }
                            that.interaction.hLinkToApp(para);	
                        },1500)
                      

                    }else if(res.code == 403){
                        Dialog.alert({
                            title: '提示',
                            message: '您的账号被挤下线，请重新登录',
                            confirmButtonText:'去登陆'
                        }).then(() => {
                            //跳转原生登录
                            let para = {};
                            para.linkType = "login";
                            this.interaction.hLinkToApp(para);
                        });
                    }else{
                        Toast(res.msg);
                    }
                });
            }    
        },
        //查询个人信息
        selectUserInfo(){
            var that = this;
            console.log("加载个人信息");
            let para = {};
            para.token = that.token;
            postQueryUserInfo(para).then(res => {
                // console.log(res);
                if(res.code == 200){
                    if(res.data.imei!=""){
                        that.isBind  = true;  //显示已绑定了设备号信息
                    }
                }else{
                    Toast(res.msg);
                }
            });
        }
    }
    
}

</script>

<style lang="stylus" scoped>
 input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #a2a2a2;
}
 input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #a2a2a2;
}
 input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #a2a2a2;
}
 input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #a2a2a2;
}
 input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #a2a2a2;
}
*{
    box-sizing :border-box;
}
 .messagelist{
    width :100%;
    min-height :100%;
    // background :#f1f1f1;
    padding: .266667rem;
    .content{
        // padding:10px;
        margin-bottom :1.333333rem;
        background :#fff;
        padding-top :10px;
        .userInfo{
            .card-box{
                p{
                    font-family:PingFangSC-Medium;
                    font-size:.4rem;
                    color:#494949;
                    letter-spacing:.0056rem;
                    margin-bottom :.266667rem;
                    // font-weight :bold;
                    &.edit{
                        margin-bottom :.533333rem;
                        
                    }
                }
                input {
                    background:#f1f1f1;
                    border-radius:5px;
                    height:1.066667rem;
                    width :100%;
                    font-family:PingFangSC-Regular;
                    font-size:.373333rem;
                    color:#333;
                    letter-spacing:.013333rem;
                    padding :.266667rem;
                    margin-bottom :.533333rem;
                }
            }
        }
        .btn{
            opacity:0.9;
            background:#1c90ff;
            box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
            width:100%;
            height:1.2rem;
            line-height :1.2rem;
            text-align :center;
            font-family:PingFangSC-Medium;
            font-size:.4rem;
            color:#ffffff;
            margin-top :.266667rem;
            // border-radius:5px;
            position:fixed;
            left:0;
            bottom:0;
        }
        .cancel{
            width :50%;
            margin :0 auto;
            text-align :center;
            font-family:PingFangSC-Regular;
            font-size:.373333rem;
            color:#494949;
            letter-spacing:.005067rem;
            margin-top :.533333rem;
            margin-bottom :.266667rem;
        }
    }
}    
</style>
<style >
    .category-box{
        background: #f1f1f1 !important;
        border-radius: 5px !important;
        height: 1.066667rem !important;
        width: 100%;
        font-family: PingFangSC-Regular !important;
        font-size: 0.373333rem !important;
        color: #333 !important;
        letter-spacing: 0.013333rem !important;
        padding: 0.266667rem !important;
        margin-bottom: 0.533333rem !important;
    }
    .category-box .van-field__control{
        font-family: PingFangSC-Regular;
        font-size: 0.373333rem !important;
        color: #333 !important;
    }
    .van-picker__cancel, .van-picker__confirm{
        font-size: .373333rem !important;
    }
</style>